<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            <el-input v-model="queryData.keyWords" class="serchs" @input="paginaClick(1)" placeholder="搜索用户名称、联系电话">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <sxnfbtn @click="paginaClick(1)" color="#23b14d">搜索</sxnfbtn>
                        <!-- <el-button type="primary" text bg @click="paginaClick(1)">搜索</el-button> -->
                    </div>
                    <sxnfbtn @click="topages('/team/teammanagement/invitelist')" color="#23b14d">邀请记录</sxnfbtn>
                    <!-- <el-button type="primary" text bg @click="topages('/team/teammanagement/invitelist')">邀请记录</el-button> -->
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%" border>
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户名称" width="220">
                    <!-- <template #default="scope">
                        {{ scope.row.nickName ? nameAnalysis(scope.row.nickName) : "" }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="phoneNum" label="联系电话" width="220">
                    <template #default="scope">
                        {{ scope.row.phoneNum ? phoneAnalysis(scope.row.phoneNum) : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="个人常驻地址">
                    <template #default="scope">
                        {{ scope.row.addressArea ? addrAnalysis(scope.row) : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="操作" width="130">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="topages(`/team/teammanagement/menbermsg/${scope.row.userId}`)">查看</el-button>
                        <el-button type="primary" size="small" link @click="invitation(scope.row)">邀请成员</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" :pageSize="queryData.pageSize" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getTeamNoDepartmentMenber, invitationMenbers } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const store = useStore();
const topages = (url: string) => {
    router.push(url);
};
const pageData = reactive({
    list: [],
    total: 0,
});

const queryData = reactive({
    pageNum: 1,
    pageSize: 15,
    teamId: store.getters.mainTeamId,
    keyWords: "",
});
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            queryData.teamId = newVal;
            getPageData();
        }
    },
    { immediate: true, deep: true }
);
const getPageData = () => {
    getTeamNoDepartmentMenber(queryData).then((res: any) => {
        // console.log(res.data.list);
        pageData.list = res.data.list;
        pageData.total = res.data.total;
    });
};
getPageData();
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
const addrAnalysis = (row: any) => {
    let addr = JSON.parse(row.addressArea);
    let text = `${addr.valueText}/${row.address}`;
    return text;
};
const phoneAnalysis = (phone: any) => {
    if (!phone) {
        return;
    }
    const pn = phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    return pn;
};
const nameAnalysis = (name: any) => {
    if (!name) {
        return;
    }
    // console.log(name.split(""));
    const names = name.split("");
    let n = "";
    if (names.length > 2) {
        n = `${names[0]}*${names[names.length - 1]}`;
    } else {
        n = `${names[0]}*`;
    }
    return n;
};
const invitation = (row: any) => {
    invitationMenbers({
        teamId: selectCompany.value,
        userId: row.userId,
    }).then((res: any) => {
        ElMessage.success("成功发送邀请");
        if (queryData.pageNum > 1) {
            if (pageData.list.length == 1) {
                queryData.pageNum -= 1;
            }
        }
        getPageData();
    });
};
</script>
<style scoped lang="scss">
.operatingrecord {
    height: calc(100vh - 135px);
    .serchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-right: 20px;
                color: #333333;
                font-size: 14px;
                .serchs {
                    width: 300px;
                }
            }
        }
    }
}
</style>
